<template>
  <div>
    <HeaderBar :currentName="_t18('sidebar_jifen', ['aams', 'robinhood2'])"></HeaderBar>

    <div style="padding: 0 0.4rem">
      <!--        <div style="background:#ffbe40;padding:10% 5%;border-radius: 14px">-->

      <!--        </div>-->
      <div class="jifen">
        <div>
          我的积分 ： <span style="font-weight: bold">{{ userStore.userInfo.user.points }}</span>
        </div>
<!--                <div style="font-size: 14px;color: #ffbe40"  @click="$router.push('/address')">-->
<!--                  地址管理-->
<!--                </div>-->

      </div>

      <div style="font-size: 18px;font-weight: bold;margin-top: 5%">

      </div>
  <div style="display: flex;flex-wrap: wrap;
    justify-content: space-between;">
    <div v-for="item in list" class="list">
      <div style="text-align: center">
        <div >
<!--          <svg-load name="mengbanzu12" class="noticeImg"></svg-load>-->
          <img :src="item.picture" class="noticeImg" alt="">
        </div>
        <div style="font-weight: bold;font-size: 18px;margin-top: 20%">
          {{item.coinValue}}  {{item.productName}}
        </div>
        <div style="font-size: 14px;color: #6f747b;margin-top: 8%">
         {{item.costPoint}}积分
        </div>
        <div style="font-size: 14px;color: #6f747b;margin-top: 8%">
         库存：{{item.inventory}}
        </div>
        <div class="jifen_button">
          <div @click="routeLink('/exchangedelite?id='+item.id+'&item='+item.type)">
            兑换商品
          </div>
        </div>
      </div>

    </div>
  </div>
    </div>
  </div>
</template>
<script setup>
import {useRouter} from "vue-router";
import {useUserStore} from '@/store/user/index'
import {_t18} from "@/utils/public";
import {getpointsList} from "@/api/defi";
import {productList} from "@/api/account";

const userStore = useUserStore()
const $router = useRouter()
// 撤单
const list = ref()
const cancelOrder = async () => {

  const res = await productList({})
  list.value = res.rows
}
const routeLink = (link) => {
  $router.push(link)
}
onMounted(() => {
  cancelOrder()
})

</script>
<style scoped lang="scss">
.jifen {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 5%;
  align-items: center;
}

.list {
  margin-top: 5%;
  padding-bottom: 5%;
  border: 0.053333rem solid #f2f3f7;
  border-radius: 0.213333rem;
  padding: 8% 5% 6% 5%;
  width: 45%;
}

.jifen_button {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.jifen_button div {
  background: #f2f3f7;
  padding: 5% 8%;
  border-radius: 14px;
  color: #2c2b30;
  margin-top: 15%;
  width: 100%;
  text-align: center;
}

.jifen_button :nth-child(2) {
  margin-left: 5%;
}
.noticeImg{
  width: 50%;
  height: 50%;
}
</style>
